<!--
  This file is a part of the open-eBackup project.
  This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0.
  If a copy of the MPL was not distributed with this file, You can obtain one at
  http://mozilla.org/MPL/2.0/.
  
  Copyright (c) [2024] Huawei Technologies Co.,Ltd.
  
  THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND,
  EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT,
  MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE.
  -->

<lv-group class="group">
    <lv-group class="left">
        <div class="tree-container resourceset-tree-container">
            <ng-container *ngIf="treeData.length;else noDataTpl">
                <lv-tree lvCompareWith="uuid" [lvData]='treeData' [(lvSelection)]="treeSelection" lvShowContentIcon
                    (lvExpandedChange)="expandedChange($event)" [lvNodeTemplate]='nodeTpl' [lvScroll]="{y:'468px'}"
                    lvVirtualScroll lvShowLine lvSelectionMode='multiple' [lvNodeTemplate]='nodeTpl'
                    [lvShowCheckbox]="!isDetail" lvSelectedByCheckbox (lvSelectionChange)="treeSelectionChange($event)"
                    lvSelectionAssociate="false">
                </lv-tree>
            </ng-container>
        </div>
    </lv-group>
    <lv-group class="right">
        <lv-tabs [(lvActiveIndex)]="activeIndex" class="right-tab aui-tab">
            <ng-container *ngFor="let tab of tabs">
                <lv-tab *ngIf="!tab.hidden" lvTitle='{{tab.label}}({{tab.resourceTotal || 0}})' [lvId]="tab.id">
                    <aui-base-table-template [subType]="tab.subType" [subUnitType]="tab?.subUnitType"
                        [treeNodeChecked]="treeNodeChecked" [treeSelection]="treeSelection" [ID]="tab.id"
                        [appType]="appType" [allSelectionMap]="allSelectionMap" [extParams]="extParams"
                        (updateTable)="updateProjectTotal($event, tab)" (baseSelectChange)="selectChange($event)"
                        (resourceGroupChange)="groupChange($event)" [data]="data" [isDetail]="isDetail"
                        [allSelect]="allSelect" [showSelect]="showSelect">
                    </aui-base-table-template>
                </lv-tab>
            </ng-container>
        </lv-tabs>
    </lv-group>
</lv-group>

<ng-template #noDataTpl>
    <div class="tree-no-data">
        <lv-empty lvDescription="{{'protection_vm_tree_no_data_label'|i18n}}"></lv-empty>
    </div>
</ng-template>

<ng-template #nodeTpl let-item>
    <lv-group class="tree-node-container" [ngClass]="{'node-checked':item.checked}" (click)="treeNodeCheck(item)">
        <lv-group lvGutter="8px">
            <i [lv-icon]="item.contentToggleIcon"></i>
            <span lv-overflow [ngClass]="{'node-label': isFc || isVmware}"
                [ngClass]="{'tree-node-offline': item.rootNodeLinkStatus === 0}">{{item.label}}</span>
        </lv-group>
    </lv-group>
</ng-template>